<!DOCTYPE html>
<html lang="cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>填字游戏</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
        .question {
            width: 432px;
            margin: 1em auto;
            padding: 1em;
            border: 1px solid #999;
        }

        .cp {
            width: 432px;
            height: 432px;
            margin: 2em auto;
        }

        .left {
            width: 200px;
        }

        ul {
            margin-bottom: 0;
            flex-wrap: wrap;
        }

        ul.pagination li.page-item input.form-control {
            width: 2.7em;
            background-color: black;
        }

        li input.form-control:hover {
            color: #fff;
            background: #ccc;
        }
    </style>
</head>

<body>
    <div class="question">
        <div class="form-group">
            <label for="dx">行：<span id="dx_span">描述</span></label>
            <input type="text" class="form-control" id="dx" maxlength="10" item_id="" placeholder="请填写答案">
        </div>
        <div class="form-group">
            <label for="dy">列：<span id="dy_span">描述</span></label>
            <input type="text" class="form-control" id="dy" maxlength="10" item_id="" placeholder="请填写答案">
        </div>
    </div>
    <div class="cp">
        <!-- ul.pagination>li.page-item*100>input.form-control[id="$" maxlength="1" disabled] -->
        <ul class="pagination">
            <li class="page-item"><input type="text" class="form-control" id="1" maxlength="1" disabled="disabled"></li>
            <li class="page-item"><input type="text" class="form-control" id="2" maxlength="1" disabled="disabled"></li>
            <li class="page-item"><input type="text" class="form-control" id="3" maxlength="1" disabled="disabled"></li>
            <li class="page-item"><input type="text" class="form-control" id="4" maxlength="1" disabled="disabled"></li>
            <li class="page-item"><input type="text" class="form-control" id="5" maxlength="1" disabled="disabled"></li>
            <li class="page-item"><input type="text" class="form-control" id="6" maxlength="1" disabled="disabled"></li>
            <li class="page-item"><input type="text" class="form-control" id="7" maxlength="1" disabled="disabled"></li>
            <li class="page-item"><input type="text" class="form-control" id="8" maxlength="1" disabled="disabled"></li>
            <li class="page-item"><input type="text" class="form-control" id="9" maxlength="1" disabled="disabled"></li>
            <li class="page-item"><input type="text" class="form-control" id="10" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="11" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="12" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="13" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="14" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="15" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="16" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="17" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="18" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="19" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="20" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="21" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="22" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="23" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="24" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="25" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="26" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="27" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="28" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="29" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="30" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="31" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="32" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="33" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="34" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="35" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="36" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="37" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="38" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="39" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="40" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="41" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="42" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="43" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="44" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="45" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="46" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="47" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="48" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="49" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="50" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="51" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="52" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="53" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="54" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="55" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="56" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="57" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="58" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="59" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="60" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="61" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="62" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="63" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="64" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="65" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="66" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="67" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="68" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="69" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="70" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="71" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="72" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="73" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="74" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="75" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="76" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="77" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="78" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="79" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="80" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="81" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="82" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="83" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="84" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="85" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="86" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="87" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="88" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="89" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="90" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="91" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="92" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="93" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="94" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="95" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="96" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="97" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="98" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="99" maxlength="1" disabled="disabled">
            </li>
            <li class="page-item"><input type="text" class="form-control" id="100" maxlength="1" disabled="disabled">
            </li>
        </ul>
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

    <script>
        const items = [
            {
                "answer": "床前明月光",
                "start_at": 1,
                'question': "疑是地上霜的前一句",
                'direction': 'y',
            },
            {
                "answer": "填字游戏",
                "start_at": 15,
                'question': "填字游戏示例",
                'direction': 'x',
            },
            {
                "answer": "填字游戏",
                "start_at": 23,
                'question': "填字游戏示例",
                'direction': 'y',
            },
            {
                "answer": "汉武帝",
                "start_at": 45,
                'question': "汉朝最伟大的皇帝",
                'direction': 'x',
            },
            {
                "answer": "白帝城",
                "start_at": 37,
                'question': "刘备托孤的地方",
                'direction': 'y',
            },
        ]

        const DIRECTION_ROW = 'x'
        const DIRECTION_COL = 'y'
        const INPUT_ENABLE_CLASS = ['form-control', 'bg-white', 'text-black']
        const INPUT_X_ENABLE_CLASS = ['form-control', ' bg-info', ' text-white']
        const INPUT_Y_ENABLE_CLASS = ['form-control', ' bg-primary', ' text-white']
        const INPUT_CURRENT_ENABLE_CLASS = ['form-control', ' bg-warning', ' text-white']


        /**
         * @question: 初始化页面
         * @param array items
         * @return void
         */
        function init(items) {
            for (let i in items) {
                let answer = items[i]['answer'].split('')
                let answer_start_at = items[i]['start_at']
                for (let answer_i in answer) {
                    //设置单元格样式
                    setCell(answer_start_at, '')
                    if (items[i]['direction'] === DIRECTION_COL) {
                        //纵向
                        answer_start_at += 10
                    } else {
                        answer_start_at += 1
                    }
                }
            }
        }

        /**
         * @question: 设置单元格
         * @param int point 位置
         * @param string word 值
         * @param string css 样式
         * @return void
         */
        function setCell(point, word, css = 'bg-white text-black') {
            let selector = getIdSelector(point)
            $(selector).val(word)
            $(selector).addClass(css)
            $(selector).removeAttr('disabled')
        }

        /**
         * @question: 获取单元格选择器
         * @param {*} point
         * @return {*}
         */
        function getIdSelector(point) {
            return '#' + point
        }

        /**
         * @question: 获取横向描述选择器
         * @param {*} hasSpan
         * @return {*}
         */
        function getquestionXSelector(hasSpan = false) {
            let res = '#dx'
            if (hasSpan){
                res += '_span'
            }
            return res
        }

        /**
         * @question: 获取纵向描述选择器
         * @param {*} hasSpan
         * @return {*}
         */
        function getquestionYSelector(hasSpan = false) {
            let res = '#dy'
            if (hasSpan){
                res += '_span'
            }
            return res
        }

        /**
         * @question: 获取词语所有下标
         * @param {*} start_at 词语开始下标
         * @param {*} answer_length 词语长度
         * @param {*} direction 词语类型，x横向，y纵向
         * @return {*}
         */
        function getItemPoints(start_at, answer_length, direction){
            const res = [start_at]
            for (let x = 0; x < answer_length - 1; x++) {
                if (direction === DIRECTION_COL) {
                    start_at += 10
                } else {
                    start_at += 1
                }
                res.push(start_at)
            }
            return res
        }

        init(items)

        //单元格获取焦点
        $('li>input[type=text]').focus(function (e) {
            //初始化描述
            $(getquestionXSelector(true)).text('')
            $(getquestionYSelector(true)).text('')

            const currentPoint = parseInt(e.target.id)

            let is_x_reset = false
            let is_y_reset = false

            for (let i in items) {
                if (items[i]['direction'] === DIRECTION_COL){
                    if (is_y_reset) {
                        continue
                    }
                } else {
                    if (is_x_reset) {
                        continue
                    }
                }
                if (is_y_reset && is_x_reset){
                    break
                }

                start_at = items[i]['start_at']
                answer_length = items[i]['answer'].split('').length
                //获取当前词语所有的下标
                item_points = getItemPoints(start_at, answer_length, items[i]['direction'])
                if (item_points.indexOf(currentPoint) !== -1) {
                    //设置页面描述
                    if (items[i]['direction'] === DIRECTION_COL) {
                        $(getquestionYSelector(true)).text(items[i]['question'])
                        $(getquestionYSelector()).attr('item_i', i)
                        $(getquestionYSelector()).attr('maxlength', items[i].length)
                        //设置单元格样式
                        item_points.forEach(point => {
                            $(getIdSelector(point)).attr('class', '').addClass(INPUT_Y_ENABLE_CLASS)
                        })
                        is_y_reset = true
                    } else {
                        $(getquestionXSelector(true)).text(items[i]['question'])
                        $(getquestionXSelector()).attr('item_i', i)
                        $(getquestionXSelector()).attr('maxlength', items[i].length)
                        //设置单元格样式
                        item_points.forEach(point => {
                            $(getIdSelector(point)).attr('class', '').addClass(INPUT_X_ENABLE_CLASS)
                        })
                        is_x_reset = true
                    }
                    $(getIdSelector(currentPoint)).attr('class', '').addClass(INPUT_CURRENT_ENABLE_CLASS)
                }
            }
        })

        //离开时，单元格重置样式
        $('li>input[type=text]').blur(function (e) {
            const currentPoint = parseInt(e.target.id)

            let is_x_reset = false
            let is_y_reset = false

            for(let i in items){
                if (items[i]['direction'] === DIRECTION_COL){
                    if (is_y_reset) {
                        continue
                    }
                } else {
                    if (is_x_reset) {
                        continue
                    }
                }
                if (is_y_reset && is_x_reset){
                    break
                }

                start_at = items[i]['start_at']
                answer_length = items[i]['answer'].split('').length

                item_points = getItemPoints(start_at, answer_length, items[i]['direction'])
                if (item_points.indexOf(currentPoint) !== -1) {
                    if (items[i]['direction'] === DIRECTION_COL) {
                        item_points.forEach(point => {
                            $(getIdSelector(point)).attr('class', '').addClass(INPUT_ENABLE_CLASS)
                        })
                        is_y_reset = true
                    } else {
                        item_points.forEach(point => {
                            $(getIdSelector(point)).attr('class', '').addClass(INPUT_ENABLE_CLASS)
                        })
                        is_x_reset = true
                    }
                }
            }
        })

        //同步输入框的值到表格
        $('.question input[type=text]').on('input', (function(e){
            let id = e.target.id
            //获取输入值
            let input_val = $('#' + id).val()
            //自动填充用户答案
            let item_id = $('#' + id).attr('item_i')
            if (item_id){
                items[item_id]['user_answer'] = input_val
                //填充到表格中
                let item_answer_max = items[item_id]['answer'].length
                let point_i = items[item_id]['start_at'];
                for(let i = 0; i < item_answer_max; i++){
                    if (input_val[i] === undefined){
                        break
                    }
                    //设置
                    $(getIdSelector(point_i)).val(input_val[i])
                    if(items[item_id]['direction'] == DIRECTION_COL){
                        point_i += 10
                    } else {
                        point_i += 1
                    }
                }
            }
        }))
    </script>
</body>

</html>